<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { width:100%; height: 100% }
        </style>


        <script type="text/javascript" src="js/key.js"></script>
        <script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="js/menuAdmin.js"></script> 

        <script type="text/javascript"  src="js/table/media/js/jquery.js"></script>
        <script type="text/javascript"  src="js/table/media/js/jquery.dataTables.js"></script>

        <script type="text/javascript"  src="js/xhr.js"></script>

        <script type="text/javascript"  src="js/adminMap.js"></script>
        <script type="text/javascript"  src="js/globalZoneView.js"></script> 
        <script type="text/javascript"  src="js/smartlocksView.js"></script>
        <script type="text/javascript"  src="js/restitutionZoneView.js"></script>   
        <script type="text/javascript"  src="js/TableWithConsole.js"></script> 

        <script type="text/javascript"  src="js/adminTable.js"></script>
        <script type="text/javascript"  src="js/itineraireTable.js"></script> 
        <script type="text/javascript"  src="js/restitutionTable.js"></script> 
        <script type="text/javascript"  src="js/restitutionZone.js"></script>
        <script type="text/javascript"  src="js/globalZone.js"></script> 

        <link rel="stylesheet" type="text/css" href="css/contextMenu.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/css-table.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
        <script>

            function init() {
                $(document).ready(
                        function() {
                            initialize_admin_map(25000);
                            showEmptyView();
                        }
                )
            }

            function show(div, b) {
                if (b === true) {
                    $('#' + div).show('slow');
                } else {
                    $('#' + div).hide('slow');
                }
            }

            function reloadSL() {
                showSmartlocks();
                reloadSmartlocks()
            }
            function autoReloadSL() {
                autoLoadSmartlock($("#smartlocksDivAutoReloadDelay").val()*1000,function() {
                    if (this.valueOf()) {
                        adminReport("Chargement automatique : ON");
                        $('#smartlocksDivAutoReloadButton').text('Stop');
                    } else {
                        adminReport("Chargement automatique : OFF");
                        $('#smartlocksDivAutoReloadButton').text('OK');
                    }

                });
            }

            function showEmptyView() {
                $('#header').html('Module de supervision');
                show('createGlobalZoneDiv', false);
                show('table_itineraire', false);
                show('smartlocksDiv', false);
                show('table_admin', false);
                show('table_restitution', false);
                createEmptyContextualMenu();
            }

            function showSmartlocks() {
                $('#header').html('Visualisation des Smartlocks');
                show('createGlobalZoneDiv', false);
                show('table_itineraire', false);
                show('smartlocksDiv', true);
                show('table_admin', true);
                show('table_restitution', false);
                if (smartlockAutoLoad === true) {
                    $('#smartlocksDivAutoReloadButton').text('Stop');
                } else {
                    $('#smartlocksDivAutoReloadButton').text('OK');
                }
                createEmptyContextualMenu();
            }

            function showGlobalZoneDiv() {
                $('#header').html('Cr&eacute;ation de la zone globale autoris&eacute;e');
                show('createGlobalZoneDiv', true);
                show('table_itineraire', false);
                show('table_admin', false);
                show('smartlocksDiv', false);
                show('table_restitution', false);
                createGlobalZoneContextualMenu();
            }

            function showRestrictionZoneDiv() {
                $('#header').html('Cr&eacute;ation et modification des zones de restitution');
                show('table_itineraire', false);
                show('createGlobalZoneDiv', false);
                show('table_admin', false);
                show('smartlocksDiv', false);
                show('table_restitution', true);
                createRestrictionZoneContextualMenu(); 
            }

            function showItineraireDiv() {
                $('#header').html('Calcul d\'itin&eacute;raires');
                show('table_itineraire', true);
                show('createGlobalZoneDiv', false);
                show('table_admin', false);
                show('smartlocksDiv', false);
                show('table_restitution', false);
                createMapContextualMenu();
            }


        </script> 
    </head>
    <body onLoad="init()"> 

        <div id="navigation">
            <ul> 
                <li><a href="#"  onclick="showEmptyView()">Home</a></li> 
                <li><a href="#" id="smartlockAutoloadId" onclick="showSmartlocks()">Smartlocks</a></li> 
                <li><a href="#" onclick="showGlobalZoneDiv()">Zone globale</a></li>
                <li><a href="#" onclick="showRestrictionZoneDiv()">Zone de restitution</a></li>
                <li><a href="#" onclick="showItineraireDiv()">Itin&eacute;raire</a></li>
            </ul>
        </div> 

        <div id="header">
            <center>Module de supervision - Smartlock</center>
        </div>

    <center>


        <div style="height: 800px" id="content"> 

            <div id="createGlobalZoneDiv"  style="display:none;">
                Modification de la zone globale : 
                <button onclick="saveGlobalZone()"> Sauvegarder</button>
                <button onclick="show('createGlobalZoneDiv', false)"> Quitter</button>
            </div>

            <table id="table_itineraire" class="display" style="display:none;">
                <thead> 
                </thead>
                <tbody> 
                </tbody>
            </table>  

            <div id="smartlocksDiv"  style="display:none;">
                Rechargement automatique toutes les 
                <input type=text  maxlength="4"  size="4" id='smartlocksDivAutoReloadDelay' value='10'> secondes
                <button id='smartlocksDivAutoReloadButton' onclick="autoReloadSL()"> OK </button>
                <button onclick="show('smartlocksDiv', false)">Annuler</button>
            </div>

            <table id="table_admin" class="display" style="display:none;">
                <thead> 
                </thead>
                <tbody> 
                </tbody>
            </table>
            
            <table id="table_restitution" class="display" style="display:none;">
                <thead> 
                </thead>
                <tbody> 
                </tbody>
            </table>
             
            <div style="width:20%; height: 800px;  display:none;" id="console"></div>
            <div style="width:100%;   height:100%; float:right; background:#00CC33;" id="admin_map-canvas" align="center"></div>

        </div>
    </center>







</body>
</html> 